<!--
 * @Author: C.
 * @Date: 2023-11-17 14:23:48
-->
<template>
  <view>
    <!-- 菜单 -->
    <view v-if="$slots['sticky-top']" class="top-warp sticky-top">
      <slot name="sticky-top" />
    </view>
    <Filter
      v-else
      ref="filterRef"
      v-model:dropdownMenu="filterMenuList"
      class="top-warp"
      v-bind="getFilterBind"
    >
      <template #slot1>
        <view class="slot1-wrapper">
          <BaseForm :schemas="getProps.formSchema" @register="registerForm" />
        </view>
        <view class="slot1-wrapper-footer">
          <view class="slot1-wrapper-footer--reset" @click="formReset"
            >重置</view
          >
          <view class="slot1-wrapper-footer--confirm" @click="formConfirm">
            确定
          </view>
        </view>
      </template>
    </Filter>

    <!-- 滚动主体 -->
    <mescroll-body :top="0" v-bind="getScrollBind">
      <slot />
    </mescroll-body>
  </view>
</template>

<script setup lang="ts">
import {
  computed,
  getCurrentInstance,
  onMounted,
  ref,
  unref,
  useSlots,
} from 'vue'
import Filter from '../../filter/index.vue'
import { useListScroll } from './hooks/useListScroll'
import { useListFilter } from './hooks/useListFilter'
import { useListData } from './hooks/useListData'

// import MstForm from '@/components/mst-form/index.vue'
import { BaseForm, useForm } from '@/components/form'
const props = defineProps({
  api: {
    type: Function,
    default: null,
  },
  params: {
    type: Object,
    default: () => {},
  },
  top: {
    type: [String, Number],
    default: '0px',
  },
  formSchema: {
    type: Array,
  },
})
const slots = useSlots()
const emits = defineEmits(['register', 'data-change'])
const dataRef = ref<Recordable[]>([])
const propsRef = ref()
const getProps = computed(() => {
  return {
    ...unref(props),
    ...unref(propsRef),
  }
})
const { load, setParams, getParams, initParams, setSuccessCb, setErrorCb } =
  useListData(
    getProps,
    {
      dataRef,
    },
    emits
  )
const { getScrollBind, resetUpScroll, getMescroll } = useListScroll({
  load,
  setSuccessCb,
  setErrorCb,
})
const [registerForm, { reset, getFieldsValue, setFieldsValue }] = useForm()
const { getFilterBind, filterMenuList, formConfirm, formReset, filterRef } =
  useListFilter(getProps, {
    setParams,
    load: resetUpScroll,
    setFieldsValue,
    getParams,
    reset,
    getFieldsValue,
  })
function setProps(props: Recordable) {
  propsRef.value = { ...propsRef.value, ...props }
}

function gettopWrapperHeight() {
  if (!slots['sticky-top']) return
  const instance = getCurrentInstance()
  const query = uni.createSelectorQuery().in(instance)

  query.select('.top-warp')?.boundingClientRect?.((data: any) => {
    console.log(data.height, 'data.height')

    setProps({ top: `${data.height}px` })
  })
  query.exec()
}

onMounted(() => {
  emits('register', {
    type: 'mounted',
    load,
    reLoad: resetUpScroll,
    setProps,
    setParams,
    initParams,
    getMescroll,
  })

  gettopWrapperHeight()
})
// 使父组件可以通过ref调用到getMescroll方法 (必须)
defineExpose({ getMescroll })
</script>

<style lang="scss">
.sticky-top {
  z-index: 99;
  position: fixed;
  top: --window-top;
  left: 0;
  width: 100%;
  background-color: white;
}
.slot1-wrapper {
  height: 70vh;
  overflow: scroll;
  position: relative;
  width: 100%;
  padding-bottom: 200rpx;
}
.slot1-wrapper-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  /* padding: 24rpx; */
  margin-top: 20rpx;
  position: absolute;
  bottom: 0;
  width: 100%;
  padding-bottom: 50rpx;
  background-color: #fff;
  &--reset,
  &--confirm {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    height: 66rpx;
    font-size: 28rpx;
    color: #555;
    background-color: #fff;
    border: 2rpx solid #ccc;
    border-radius: 66rpx;
  }

  &--confirm {
    margin-left: 24rpx;
    color: #fff;
    background-color: var(--dropdown-theme-color);
    border-color: var(--dropdown-theme-color);
  }

  &--reset:hover,
  &--confirm:hover {
    opacity: 0.8;
  }
}
</style>
